<template>
  <view>
    <u-navbar
      title="完成待办"
      @rightClick="rightClick"
      :autoBack="true"
    ></u-navbar>
    <u-gap height="4" bgColor="#eaecef"></u-gap>

    <view class="content">
      <u--form labelPosition="left" labelAlign="left" labelWidth="90">
        <u-form-item label="操作人：" borderBottom>
          <view class="flexBox">
            <text>{{ userInfo.name }}</text>
          </view>
        </u-form-item>
        <u-form-item label="备注：" borderBottom>
          <textarea v-model="remark" class="Utextarea flexBox" />
        </u-form-item>
        <u-form-item label="附件：" borderBottom>
          <u-upload
            class="flexBox"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :maxCount="6"
          ></u-upload>
        </u-form-item>
        <u-form-item label="下次跟进：" borderBottom>
          <view class="flexBox">
            <u-checkbox-group v-model="checked" @change="checkboxChange">
              <u-checkbox name="是" label="是(需要请勾选)"></u-checkbox>
            </u-checkbox-group>
          </view>
        </u-form-item>
        <template v-if="is_next == '1'">
          <u-form-item label="跟进时间：" borderBottom>
            <text class="flexBox" @click="show = true">{{ next_time }}</text>
          </u-form-item>
          <u-form-item label="选中员工：" borderBottom>
            <text class="flexBox" @click="handleStaff">{{
              next_user_name
            }}</text>
          </u-form-item>
          <u-form-item label="完成方式：" borderBottom>
            <u-checkbox-group
              v-model="is_complete"
              placement="row"
              @change="groupChange"
              class="flexBox"
            >
              <u-checkbox
                :customStyle="{ marginRight: '20rpx' }"
                v-for="(item, index) in radiolist"
                :key="index"
                :label="item.name"
                :name="item.id"
              >
              </u-checkbox>
            </u-checkbox-group>
          </u-form-item>
        </template>
      </u--form>
    </view>
    <view class="listBoxCot_btn">
      <view class="small_btn" @click="handleClone">关闭</view>
      <view class="small_btn green" @click="handleClick">提交</view>
    </view>
    <u-datetime-picker
      :show="show"
      mode="date"
      v-model="value1"
      @confirm="handleConfirm"
      @cancel="handleCloneConfirm"
    ></u-datetime-picker>
    <!-- <u-action-sheet
      :actions="workList"
      :show="staffFlag"
      cancelText="取消"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      @select="handleSelectStaff"
      @close="handleCloseStaff"
    ></u-action-sheet> -->
    <u-popup :show="staffFlag" @close="handleCloseStaff" @open="open">
      <view class="title">选择员工</view>
      <view class="list">
        <view
          v-for="item in workList"
          :key="item.id"
          @tap="handleSelectStaff(item)"
          >{{ item.name }}</view
        >
      </view>
      <view class="cancel" @tap="handleCloseStaff">取消</view>
    </u-popup>
  </view>
</template>

<script>
import { sidebarTaskFeedback, sidebarTaskWorkeList } from '@/config/api'
import InitWx from '@/mixins/init-wx'

export default {
  mixins: [InitWx],
  data() {
    return {
      userInfo: {},
      remark: '',
      fileList1: [],
      show: false,
      value2: Number(new Date()),
      staffFlag: false,
      next_user_name: '请选择员工',
      next_time: '请选择时间',
      checked: [],
      is_next: 0,
      checkedFlag: '',
      checkedName: '',
      is_complete: '',
      value1: Number(new Date()),
      workList: [],
      radiolist: [
        {
          name: '客户聊天',
          id: 1,
        },
        // {
        //   name: "手动登记",
        //   id: 2,
        // },
      ],
      userId: null,
      id: null,
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getWorkList()
  },
  async onShow(options) {
    console.log(uni.getStorageSync('UserId'))
    this.userId = uni.getStorageSync('UserId')
    this.userInfo = {
      id: this.userId,
    }
  },
  methods: {
    async getWorkList() {
      const result = await sidebarTaskWorkeList()
      console.log(this.userId)

      let obj = result.filter((item) => {
        return item.userid == this.userId
      })[0]

      this.userInfo = {
        ...this.userInfo,
        ...obj,
      }
      console.log(this.userInfo)
      this.workList = result
    },
    async handleClick() {
      let {
        is_next,
        remark,
        fileList1,
        is_complete,
        next_time,
        next_user_id,
        userInfo,
        id,
      } = this
      if (!remark) {
        this.showToast('请输入备注!')
        return
      }

      // if (!fileList1.length) {
      //   this.showToast("请上传附件!");
      //   return;
      // }
      if (is_next == 1) {
        if (next_time == '请选择时间') {
          this.showToast('请选择时间!')
          return
        }
        if (!next_user_id) {
          this.showToast('请选择员工!')
          return
        }
        // if (!is_complete) {
        //   this.showToast("请进行登记!");
        //   return;
        // }
      }

      let updataUrl = this.fileList1.map((item) => {
        return item.url
      })

      const result = await sidebarTaskFeedback({
        id,
        create_id: userInfo.id,
        remark,
        complete_file_url: updataUrl.join(','),
        is_next,
        next_time,
        next_user_id,
        is_complete,
      })

      this.showToast(result.msg)
      this.handleClone()
    },
    handleClone() {
      uni.redirectTo({
        url: '/pages/base/index',
      })
    },
    handleStaff() {
      this.staffFlag = true
    },
    handleCloseStaff() {
      this.staffFlag = false
    },
    handleSelectStaff(e) {
      this.next_user_name = e.name
      this.next_user_id = e.id
      this.staffFlag = false
    },
    groupChange(e) {
      this.is_complete = e
    },

    checkboxChange(e) {
      if (e[0] == '是') {
        this.is_next = 1
      } else {
        this.is_next = 0
      }
    },
    handleConfirm(e) {
      const timeFormat = uni.$u.timeFormat
      let timeValue = timeFormat(e.value, 'yyyy-mm-dd')
      this.next_time = timeValue

      this.handleCloneConfirm()
    },
    handleCloneConfirm() {
      this.show = false
    },
    deletePic(event) {
      this.fileList1.splice(event.index, 1)
    },
    async afterRead(event) {
      var _this = this

      uni.uploadFile({
        // url: "https://fastdemo.165.busybiz.cn/api/common/upload", //接口地址
        url: 'https://www.zhiyinglasses.cn/api/common/upload', //接口地址
        filePath: event.file.url,
        name: 'file', //后台对应的参数名
        success: (res) => {
          var result = JSON.parse(res.data)
          _this.fileList1.push({
            name: event.file.name,
            size: event.file.size,
            thumb: result.data.fullurl,
            type: 'image',
            url: result.data.fullurl,
          })
        },
        fail(err) {
          console.log(err, '接口调用失败')
        },
      })
    },
    showToast(msg) {
      uni.showToast({
        title: msg,
        icon: 'none',
        duration: 2000,
      })
    },
  },
}
</script>

<style lang="scss">
page {
  width: 100%;
  background: #fff;
  /deep/ .u-form-item__body__left {
    align-items: flex-start !important;
  }
  .content {
    padding: 0 40rpx;
    margin-top: 80rpx;
  }

  .flexBox {
    // margin-left: 50rpx;
    width: 100%;
  }

  .listBoxCot_btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
  }
  .small_btn {
    padding: 10rpx 30rpx;
    border: 1px solid #eaecef;
    border-radius: 10rpx;
    margin-right: 50rpx;
  }
}
.Utextarea {
  height: 200rpx;
}
.title,
.cancel {
  text-align: center;
  line-height: 35rpx;
  font-size: 28rpx;
  padding: 20rpx 0;
}
.cancel {
  border-top: 20rpx solid #eaecef;
}
.list {
  height: 420rpx;
  overflow-y: scroll;
  view {
    text-align: center;
    line-height: 70rpx;
    border-top: 1rpx solid #eaecef;
  }
  & > view:last-child {
    border-bottom: 1rpx solid #eaecef;
  }
}
</style>
